<template>
  <el-button type="primary" @click="visible = true" class="fixed top-1/3 right-2">
    <el-icon size="large">
      <ep-setting></ep-setting>
    </el-icon>
  </el-button>
  <el-drawer v-model="visible" :title="t('settings.title')">
    <template #default>
      <el-row align="middle" justify="center" class="py-2">
        <el-col :span="6">
          <span>{{ t('settings.language.label') }}</span> :
        </el-col>
        <el-col :span="12" :offset="0">
          <app-locale-picker></app-locale-picker>
        </el-col>
      </el-row>
      <!-- 
      <el-row align="middle" justify="center" class="py-2">
        <el-col :span="6">
          <span>{{ t('settings.mode.label') }}:</span>
        </el-col>
        <el-col :span="12" :offset="0">
            <el-button @click="() => toggleDark(!isDark)">
            {{ t(`settings.mode.${isDark ? 'dark' : 'light'}`) }}
            <template #icon>
              <ep-moon v-if="isDark"></ep-moon>
              <ep-sunny v-else></ep-sunny>
            </template>
          </el-button>
          <el-switch v-model="appStore.isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" :active-text="t('settings.mode.dark')" :inactive-text="t('settings.mode.light')" />
        </el-col>
      </el-row> -->

      <!-- <el-row align="middle" justify="center" class="py-2">
        <el-col :span="6">
          <span>清除Token:</span>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-button @click="() => (accountStore.token = '')"> </el-button>
        </el-col>
      </el-row> -->
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
const visible = ref<boolean>(false);

const { t } = useI18n();
</script>

<style scoped></style>
